本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

有了首字之後，當然要來個首行選取器囉，首行選取器故名思義就是選取第一行的意思了，與前個選取器一樣是個被IE耽誤的僞元素選取器，使用方式就是直接讓被設定的物件內容第一行呈現你想設定的樣子，例如

HTML

<p>
Amos 不知道這個選取器到底有啥應用，所以今天的文章會很短，真是有夠難寫的一個選取器啊啊啊啊啊啊啊！這樣就算了，我還要花時間打出這樣一段文字好示範這個選取器的作用，真是無言啊
</p>

CSS

p::first-line{
	color: red;
}

上面這段原始碼可讓 HTML 中第一行的文字呈現紅色色彩，原本想玩看看是否能夠有像是 ::first-letter 類似的效果，但這個選取器對 CSS 可運的的屬性實在太少了，你無法對 ::first-line 設定 float，也無法對他做 absolute，他就是很純粹的設定第一行文字，永遠都只有第一行！

事實上網路上可見到一些簡單的應用實例，但其實這些實際的例子都可以用 ::before 與 ::after 替代，且 ::before 與 ::after 可做的變化比起 ::first-line 還要多上很多，那些例子也都不是非常的適合用在專案上，所以最後 Amos 真的覺得沒啥必要寫那些無用的例子出來浪費各位的時間，而至今 Amos 多年的經驗來說，仍舊沒有用得上這個屬性地方，就讓他繼續低調吧！（今天的文章也真的好低調啊...）

以上就是今天的 金魚都能懂的 CSS 選取器 - ::first-line 首行選取器 - 低調到不行的選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學